<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1：插值表达式、data、methods、computer和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1 style="color: rebeccapurple;">知识点1：插值表达式</h1>
        <!--{{}}插值表达式符号-->
        <p>我是变量:{{msg}}</p>
        <p>我是表达式:{{num+100}}</p>
        <p>我是条件运算符:{{1+1==2?'ok':'no'}}</p>
        <p>我是方法: {{add()}}</p>
        <h1 style="color: pink;">知识点2：data</h1>
        <h3>我们在控制台中可以通过实例名.$data的形式来访问或修改data中的数据</h3>
        <h1 style="color: aquamarine;">知识点3：methods</h1>
        <h3>方法的定义有两种形式：1.方法名(){}   2.方法名：function(){}</h3>
        <p>{{sub(99999999)}}</p>
        <h1>知识点4：computed计算属性</h1>
        <h3>当我们遇到比较复杂的逻辑时，vue提倡我们使用computed计算属性
            在计算属性中，我们可以解决比较复杂的逻辑，包括逻辑运算，函数调用等
            最后只要返回一个结果就好
        </h3>
        <p>字符串倒置：{{rev}}</p>
        <P>调用方法字符串倒置：{{revMethod()}}</P>
        <h3>计算属性是基于依赖的变量进行缓存的，只有它相关的依赖发生改变时，
            才会重新求值,而方法是每次页面刷新时都会重新调用</h3>
        </h3>    
        <h3>通常计算属性是不能进行修改的，是只读的</h3>
        <h1>知识点5：watch 监听</h1>
        <h3>当我们需要在某种状态变化时，执行一些其他操作，watch具有监听功能
            只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法
        </h3>
        <h4>1.函数式监听器：在watch选项中声明的函数式监听器，其中函数名就是我们
            要监听的数据源
        </h4>
        <h4>2.对象监听器：在watch选项中声明的对象式监听器，其中的对象名就是
            我们要监听的数据源
        </h4>
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        //data里面放置全部的数据，包括变量和对象
        data() {
            return {
                msg:'我的第一个vue页面',
                num:1,
                grade:60,
                user:{
                    name:"zzz",
                    age:20
                }
            }
        },
        //在methods里面放置全部的方法
        methods: {
            add(){
                return this.num + 10000
            },
            sub:function(val){
                return this.num + val
            },
            revMethod(){
                console.log("我是方法，我被调用了一次！")
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            rev(){
                console.log("我是计算属性，我被调用了一次！")
                return this.msg.split('').reverse().join('')
            }
        },
         watch:{
                grade(newData,oldData){
                    console.log("改变前的数据"+oldData);
                    console.log("改变后的数据"+newData);
                    if(oldData<newData){
                        console.log("你进步了，不错");
                    }
                    else{
                        console.log("你退步了");
                    }
                },
                'user.age':{
                    handler(newData,oldData){
                    console.log("改变前的数据"+oldData);
                    console.log("改变后的数据"+newData);
                    if(newData>=120 || newData<0)
                    console.log("你确定你输入的是年龄吗？                                                                                                                                                                                                                                                        ");
                    }
                }
            }
    }).mount("#app")
</script>